<template>
  <div class="box-body box-primary">
    <DepartBaseInfo ref='departBaseInfo' v-bind:baseInfo="this.dbaseInfo" v-bind:isReadOnly="!editable"></DepartBaseInfo>
    <div class="box-body box-primary">
      <div class="box-header with-border">
        <h3 class="box-title">人员信息</h3>
      </div>
      <div class="box-body">
        <div class=" form-inline dt-bootstrap" id="departEmployees">
          <div class="row">
            <div class="col-sm-12 table-responsive">
              <table class="table table-hover table table-bordered table-striped dataTable">
                <tbody>
                  <tr>
                    <th aria-label="姓名" style="width: 142px;" colspan="1" rowspan="1" aria-controls="tblresumes" tabindex="0" class="sorting">姓名</th>
                    <th aria-label="职务" style="width: 101px;" colspan="1" rowspan="1" aria-controls="tblresumes" tabindex="0" class="sorting">职务</th>
                    <th aria-label="手机" style="width: 101px;" colspan="1" rowspan="1" aria-controls="tblresumes" tabindex="0" class="sorting">手机</th>
                    <th aria-label="办公电话" style="width: 101px;" colspan="1" rowspan="1" aria-controls="tblresumes" tabindex="0" class="sorting">办公室</th>
                  </tr>
                  <tr v-for='(value,key) in this.demployees' role="row" class="value.cls" :key="key">
                    <td> {{ value.name }}</td>
                    <td class="text-light" v-text="getPositions(value.positions)"></td>
                    <td>{{ value.phone }}</td>
                    <td>{{ value.tel }}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import DepartBaseInfo from './DepartBaseInfo'
export default {
  name: 'DepartDetail',
  props: ['baseInfo', 'employees', 'editable'],
  data: function() {
    return {
      dbaseInfo: {
        name: '',
        address: '',
        zipcode: '',
        areacode: '',
        fax: '',
        tel: ''
      },
      demployees: []
    }
  },
  mounted: function() {
    if (this.baseInfo) {
      this.dbaseInfo = baseInfo
    }

    if (this.employees) {
      this.demployees = employees
    }
  },
  components: {
    DepartBaseInfo
  },
  methods: {
    departChanged: function(departData) {
      console.log('departchanged to ' + departData)
      this.dbaseInfo = departData.baseInfo
      this.demployees = departData.employees
      this.$refs.departBaseInfo.setData(this.dbaseInfo)
    },
    getDepartBaesData() {
      return this.$refs.departBaseInfo.getData()
    },
    getPositions: function(positions) {
      let posStr = null
      if (positions) {
        let positionStore = this.$store.state.sysconfigs.positions
        var posArray = positions.split(',')
        for (var index in posArray) {
          for (var posIndex in positionStore) {
            if (posArray[index] == positionStore[posIndex].id) {
              if (!posStr) {
                posStr = positionStore[posIndex].name
              }
              else
                posStr = posStr.concat(",").concat(positionStore[posIndex].name);
            }
          }
        }
      }
      return posStr
    }
  }
}
</script>
<style>

</style>

